<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#6c757d" />
    <meta name="msapplication-TileColor" content="#2d89ef" />
    <meta name="theme-color" content="#ffffff" />

    <!-- Primary Meta Tags -->
    <title>Coronavirus Outbreak in India - covid19india.org</title>
    <meta
      name="title"
      content="Coronavirus Outbreak in India: Latest Map and Case Count"
    />
    <meta
      name="description"
      content="A volunteer-driven crowdsourced effort to track the coronavirus in India. A detailed country map shows the extent of the coronavirus outbreak, with tables of the number of cases by state and district."
    />
    <meta
      name="keywords"
      content="covid, covid19, covid-19, covid19india, coronavirus, corona, india, virus, pandemic, disease, carona, karona, korona"
    />

    <link
      rel="preconnect"
      href="https://api.covid19india.org/min/data.min.json"
      as="fetch"
    />
    <link
      rel="preconnect"
      href="https://api.covid19india.org/min/timeseries.min.json"
      as="fetch"
    />

    <!-- Font Preloading -->
    <link
      rel="preload"
      href="/fonts/Archia/archia-semibold-webfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/Archia/archia-medium-webfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/Archia/archia-bold-webfont.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />

    <style>
      /* font-face declarations for preloaded fonts */
      /* These are the only 3 fonts being used.
      font-face declarations for thin, regular and light fonts should be added as needed */
      @font-face {
        font-family: 'Archia';
        src: url('/fonts/Archia/archia-semibold-webfont.eot');
        src: local('Archia'),
          url('/fonts/Archia/archia-semibold-webfont.eot?#iefix')
            format('embedded-opentype'),
          url('/fonts/Archia/archia-semibold-webfont.woff2') format('woff2'),
          url('/fonts/Archia/archia-semibold-webfont.woff') format('woff'),
          url('/fonts/Archia/archia-semibold-webfont.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: 'Archia';
        src: url('/fonts/Archia/archia-medium-webfont.eot');
        src: local('Archia'),
          url('/fonts/Archia/archia-medium-webfont.eot?#iefix')
            format('embedded-opentype'),
          url('/fonts/Archia/archia-medium-webfont.woff2') format('woff2'),
          url('/fonts/Archia/archia-medium-webfont.woff') format('woff'),
          url('/fonts/Archia/archia-medium-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

      @font-face {
        font-family: 'Archia';
        src: url('/fonts/Archia/archia-bold-webfont.eot');
        src: local('Archia'),
          url('/fonts/Archia/archia-bold-webfont.eot?#iefix')
            format('embedded-opentype'),
          url('/fonts/Archia/archia-bold-webfont.woff2') format('woff2'),
          url('/fonts/Archia/archia-bold-webfont.woff') format('woff'),
          url('/fonts/Archia/archia-bold-webfont.ttf') format('truetype');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
      }
    </style>

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.covid19india.org" />
    <meta
      property="og:title"
      content="Coronavirus in India: Latest Map and Case Count"
    />
    <meta
      property="og:description"
      content="A volunteer-driven crowdsourced effort to track the coronavirus in India. A detailed country map shows the extent of the coronavirus outbreak, with tables of the number of cases by state and district."
    />
    <meta
      property="og:image"
      content="https://www.covid19india.org/thumbnail.png"
    />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="512" />
    <meta property="og:image:height" content="512" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://www.covid19india.org" />
    <meta
      property="twitter:title"
      content="Coronavirus in India: Latest Map and Case Count"
    />
    <meta name="twitter:site" value="@covid19indiaorg" />
    <meta
      property="twitter:description"
      content="A volunteer-driven crowdsourced effort to track the coronavirus in India. A detailed country map shows the extent of the coronavirus outbreak, with tables of the number of cases by state and district."
    />
    <meta
      property="twitter:image"
      content="https://www.covid19india.org/thumbnail.png"
    />
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

  <script>
    // Insert this script in your index.html right after the <body> tag.
    // This will help to prevent a flash if dark mode is the default.
    (function () {
      // Change these if you use something different in your hook.
      var storageKey = 'darkMode';
      var classNameDark = 'dark-mode';
      var classNameLight = 'light-mode';

      function setClassOnDocumentBody(darkMode) {
        document.body.classList.add(darkMode ? classNameDark : classNameLight);
        document.body.classList.remove(
          darkMode ? classNameLight : classNameDark
        );
      }

      var preferDarkQuery = '(prefers-color-scheme: dark)';
      var mql = window.matchMedia(preferDarkQuery);
      var supportsColorSchemeQuery = mql.media === preferDarkQuery;
      var localStorageTheme = null;
      try {
        localStorageTheme = localStorage.getItem(storageKey);
      } catch (err) {}
      var localStorageExists = localStorageTheme !== null;
      if (localStorageExists) {
        localStorageTheme = JSON.parse(localStorageTheme);
      }

      // Determine the source of truth
      if (localStorageExists) {
        // source of truth from localStorage
        setClassOnDocumentBody(localStorageTheme);
      } else if (supportsColorSchemeQuery) {
        // source of truth from system
        setClassOnDocumentBody(mql.matches);
        localStorage.setItem(storageKey, mql.matches);
      } else {
        // source of truth from document.body
        var isDarkMode = document.body.classList.contains(classNameDark);
        localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
      }
    })();
  </script>

  <!-- Google Analytics -->
  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r;
      (i[r] =
        i[r] ||
        function () {
          (i[r].q = i[r].q || []).push(arguments);
        }),
        (i[r].l = 1 * new Date());

      setTimeout(() => {
        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m);
      }, 3000); // Wait 3 seconds
    })(
      window,
      document,
      'script',
      'https://www.google-analytics.com/analytics.js',
      'ga'
    );

    ga('create', 'UA-160698988-1', {
      site_speed_sample_rate: 1,
      sample_rate: 1,
    });
    ga('send', 'pageview');
  </script>
  <!-- End Google Analytics -->
</html>
